﻿@using CodePen.Server.Language;
@{    Layout = "_Layout";
    ViewData["Title"] ="数据概览";
}

<div class="dashboard-container">
    <el-card class="dashboard-card">
        <div slot="header" class="clearfix">
            <span>数据概览</span>
        </div>
        
        <!-- 统计数据展示区域 -->
        <el-row :gutter="20">
            <el-col :span="6">
                <avue-data-display :option="contentStatsOption"></avue-data-display>
            </el-col>
            <el-col :span="6">
                <avue-data-display :option="activeContentStatsOption"></avue-data-display>
            </el-col>
            <el-col :span="6">
                <avue-data-display :option="categoryStatsOption"></avue-data-display>
            </el-col>
            <el-col :span="6">
                <avue-data-display :option="activeCategoryStatsOption"></avue-data-display>
            </el-col>
        </el-row>
    </el-card>
    
    <!-- 图表和数据表格区域 -->
    <el-row :gutter="20" style="margin-top:20px;">
        <!-- 分类内容分布图表 -->
        <el-col :span="12">
            <el-card class="dashboard-card">
                <div slot="header" class="clearfix">
                    <span>分类内容分布</span>
                </div>
                <div id="categoryChart" style="height:580px;"></div>
            </el-card>
        </el-col>
        
        <!-- 最近添加的情话 -->
        <el-col :span="12">
            <el-card class="dashboard-card">
                <div slot="header" class="clearfix">
                    <span>最近添加的情话</span>
                </div>
                <el-table :data="recentContents" style="width: 100%" stripe>
                    <el-table-column prop="content" label="内容" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="category" label="分类"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作" width="80">
                        <template slot-scope="scope">
                            <el-button type="primary" @@click="viewContent(scope.row)" :size="size">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    
    <!-- 快速操作区域 -->
    <el-card class="dashboard-card" style="margin-top:20px;">
        <div slot="header" class="clearfix">
            <span>快速操作</span>
        </div>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-button type="primary" icon="el-icon-plus" @@click="navigateTo('/Content/Index')" :size="size">添加情话</el-button>
            </el-col>
            <el-col :span="6">
                <el-button type="success" icon="el-icon-folder-add" @@click="navigateTo('/Category/Index')" :size="size">管理分类</el-button>
            </el-col>
            <el-col :span="6">
                <el-button type="info" icon="el-icon-document" @@click="navigateTo('/Content/Index')" :size="size">查看所有情话</el-button>
            </el-col>
            <el-col :span="6">
                <el-button type="warning" icon="el-icon-refresh" @@click="refreshDashboard" :size="size">刷新数据</el-button>
            </el-col>
        </el-row>
    </el-card>
</div>

<!-- 内容详情对话框 -->
<el-dialog
  title="情话详情"
  :visible.sync="contentDialogVisible"
  width="500px"
  :close-on-click-modal="false"
>
  <el-form label-position="top">
    <el-form-item label="内容">
      <div class="content-detail-text">{{ contentDetail.content }}</div>
    </el-form-item>
    <el-form-item label="分类">
      <el-tag>{{ contentDetail.category }}</el-tag>
    </el-form-item>
    <el-form-item label="创建时间">
      <span>{{ contentDetail.createTime }}</span>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @@click="contentDialogVisible = false">关闭</el-button>
  </div>
</el-dialog>

@section Scripts {
    <style>
        .dashboard-container {
            padding: 20px;
        }
        .dashboard-card {
            margin-bottom: 0;
        }
        .avue-data-display {
            width: 100%;
        }
        .content-detail-text {
            white-space: pre-wrap;
            word-break: break-all;
            font-size: 16px;
            line-height: 1.6;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
            min-height: 100px;
        }
    </style>
    <script src="~/js/echarts.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    size:formOption.size,
                    themeV: localStorage.getItem('themeV'),
                    
                    // 统计数据选项
                    contentStatsOption: {
                        span: 24,
                        data: [{
                            count: 0,
                            title: '总情话数',
                            icon: 'el-icon-document',
                            color: '#409EFF'
                        }]
                    },
                    
                    activeContentStatsOption: {
                        span: 24,
                        data: [{
                            count: 0,
                            title: '激活状态情话数',
                            icon: 'el-icon-circle-check',
                            color: '#67C23A'
                        }]
                    },
                    
                    categoryStatsOption: {
                        span: 24,
                        data: [{
                            count: 0,
                            title: '总分类数',
                            icon: 'el-icon-folder',
                            color: '#E6A23C'
                        }]
                    },
                    
                    activeCategoryStatsOption: {
                        span: 24,
                        data: [{
                            count: 0,
                            title: '激活状态分类数',
                            icon: 'el-icon-folder-opened',
                            color: '#F56C6C'
                        }]
                    },
                    
                    // 最近添加的情话
                    recentContents: [],
                    
                    // 图表实例
                    categoryChart: null,
                    
                    // 内容详情对话框
                    contentDialogVisible: false,
                    contentDetail: {}
                }
            },
            
            created() {
                // 页面加载时获取数据
                this.loadDashboardData();
            },
            
            mounted() {
                // 初始化图表
                this.initCategoryChart();
            },
            
            methods: {
                // 加载Dashboard数据
                loadDashboardData() {
                    // 使用已配置好的axios实例发起请求
                    this.$http.get('/dashboard/dashboardstats')
                        .then(data => {
                            // axios拦截器已经处理了成功和错误的情况，这里直接使用返回的数据
                            // 更新统计数据 - 使用正确的数据路径
                            this.contentStatsOption.data[0].count = data.contentCount;
                            this.activeContentStatsOption.data[0].count = data.activeContentCount;
                            this.categoryStatsOption.data[0].count = data.categoryCount;
                            this.activeCategoryStatsOption.data[0].count = data.activeCategoryCount;
                            
                            // 更新最近添加的情话
                            this.recentContents = data.recentContents;
                            
                            // 更新图表数据
                            this.updateCategoryChart(data.categoryDistribution);
                        })
                        .catch(error => {
                            // 错误已经在axios拦截器中处理，这里可以进行额外的错误处理
                            console.error('加载Dashboard数据失败:', error);
                        });
                },
                
                // 初始化分类分布图表
                initCategoryChart() {
                    this.categoryChart = echarts.init(document.getElementById('categoryChart'));
                    
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '内容分布',
                                type: 'pie',
                                radius: '50%',
                                data: [],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    
                    this.categoryChart.setOption(option);
                },
                
                // 更新分类分布图表
                updateCategoryChart(data) {
                    if (this.categoryChart) {
                        this.categoryChart.setOption({
                            series: [{
                                data: data
                            }]
                        });
                    }
                },
                
                // 查看具体情话内容
                viewContent(content) {
                    // 直接使用表格中的数据填充详情
                    this.contentDetail = {
                        content: content.content,
                        category: content.category,
                        createTime: content.createTime
                    };
                    // 显示对话框
                    this.contentDialogVisible = true;
                },
                
                // 页面跳转
                navigateTo(url) {
                    window.location.href = url;
                },
                
                // 刷新Dashboard数据
                refreshDashboard() {
                    this.loadDashboardData();
                    this.$message.success('数据已刷新');
                }
            }
        });
    </script>
}